{% extends 'pages/_base.html' %}
{% block _base %}

<img id="img_background" src="{{ data.PersonalInformation.img_background }}" alt="" style="width: 100%; height: 50vh; object-fit: cover; object-position: center; border: 3px solid #000; border-radius: 8px;" />

<div class="d-flex align-items-center mt-4">
    <img id="img_icon" src="{{ data.PersonalInformation.img_icon }}" alt=""
        style="width: 20vh; height: 20vh; object-fit: cover; object-position: center;
               border: 3px solid #000; border-radius: 50%;" />

    <div class="d-flex flex-column ml-3">
        <span class="badge badge-primary p-2 mb-2" id="username">{{ data.session.username }}</span>
        <span class="badge badge-secondary p-2" id="role">{{ data.PersonalInformation.role }}</span>
    </div>
</div>
<div class="alert mt-4" role="alert" id="intro" style="word-wrap: break-word; max-width: 100%;">
    {{ data.PersonalInformation.intro }}
</div>

<script>
    EventLoad(async () => {

        let colors = [
            {bg: "#f8d7da", text: "#721c24"},
            {bg: "#d4edda", text: "#155724"},
            {bg: "#cce5ff", text: "#004085"},
            {bg: "#fff3cd", text: "#856404"},
            {bg: "#d1c4e9", text: "#4a148c"}
        ];

        let intro = getElementById('intro')
        let randomColor = colors[Math.floor(Math.random() * colors.length)];
        intro.style.backgroundColor = randomColor.bg;
        intro.style.color = randomColor.text;

        let img_background = getElementById('img_background')
        let img_icon = getElementById('img_icon')

        ImageModal(img_background);
        ImageModal(img_icon);


        {% if data.writeable %}
            await ImageUpload(img_background, async (file) => {
                let base64 = await toBase64(file);
                let data_ = {'img_background': base64};
                let res = await fetchPost('{{ url_for('api.update_personal_img_background') }}', data_);
                flash(res.msg);
            });

            await ImageUpload(img_icon, async (file) => {
                let base64 = await toBase64(file);
                let data_ = {'img_icon': base64};
                let res = await fetchPost('{{ url_for('api.update_personal_img_icon') }}', data_);
                flash(res.msg);
            });

            await TextUpload(intro, async (text) => {
                let data_ = {'intro': text}
                let res = await fetchPost('{{ url_for('api.update_personal_intro') }}', data_);
                flash(res.msg);
            })
        {% endif %}
    })
</script>
{% endblock %}
